<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTTP vs HTTPS 数据传输对比演示</title>
    <style>
        :root {
            --http-color: #f44336;
            --https-color: #4CAF50;
            --secondary-color: #2196F3;
            --light-bg: #f5f5f5;
            --dark-bg: #333;
            --text-dark: #333;
            --text-light: #fff;
        }
        
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background-color: #f0f2f5;
            color: var(--text-dark);
            line-height: 1.6;
            padding: 20px;
        }
        
        header {
            text-align: center;
            margin-bottom: 30px;
            padding: 20px;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: white;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }
        
        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
        }
        
        .subtitle {
            font-size: 1.2rem;
            opacity: 0.9;
        }
        
        .container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .input-section {
            flex: 1;
            min-width: 300px;
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
        }
        
        .input-section h2 {
            color: var(--secondary-color);
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .protocol-comparison {
            flex: 2;
            min-width: 300px;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        .protocol {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
            position: relative;
            overflow: hidden;
        }
        
        .protocol::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 8px;
            height: 100%;
        }
        
        .http::before {
            background-color: var(--http-color);
        }
        
        .https::before {
            background-color: var(--https-color);
        }
        
        .protocol-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .protocol-title {
            font-size: 1.5rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .http .protocol-title {
            color: var(--http-color);
        }
        
        .https .protocol-title {
            color: var(--https-color);
        }
        
        .status {
            padding: 5px 15px;
            border-radius: 20px;
            font-weight: 600;
            font-size: 0.9rem;
        }
        
        .http .status {
            background-color: rgba(244, 67, 54, 0.1);
            color: var(--http-color);
        }
        
        .https .status {
            background-color: rgba(76, 175, 80, 0.1);
            color: var(--https-color);
        }
        
        .message-box {
            background-color: var(--light-bg);
            padding: 15px;
            border-radius: 8px;
            font-family: monospace;
            white-space: pre-wrap;
            overflow-x: auto;
            margin-bottom: 15px;
            max-height: 300px;
            overflow-y: auto;
        }
        
        .encryption-process {
            margin-top: 20px;
            padding-top: 15px;
            border-top: 1px dashed #ddd;
        }
        
        .process-steps {
            display: flex;
            justify-content: space-between;
            margin: 15px 0;
            position: relative;
        }
        
        .process-steps::before {
            content: '';
            position: absolute;
            top: 30px;
            left: 0;
            right: 0;
            height: 2px;
            background: #ddd;
            z-index: 1;
        }
        
        .step {
            display: flex;
            flex-direction: column;
            align-items: center;
            z-index: 2;
            position: relative;
            width: 25%;
        }
        
        .step-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 10px;
            background: white;
            border: 2px solid #ddd;
            font-size: 1.5rem;
        }
        
        .https .step-icon {
            background-color: var(--https-color);
            color: white;
            border-color: var(--https-color);
        }
        
        .step-text {
            text-align: center;
            font-size: 0.9rem;
            padding: 0 5px;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #555;
        }
        
        textarea, input[type="url"] {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            margin-bottom: 15px;
            font-size: 1rem;
            transition: border-color 0.3s;
        }
        
        textarea:focus, input[type="url"]:focus {
            outline: none;
            border-color: var(--secondary-color);
            box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
        }
        
        button {
            background-color: var(--secondary-color);
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 1rem;
            font-weight: 600;
            transition: background-color 0.3s;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        button:hover {
            background-color: #0b7dda;
        }
        
        .visual-difference {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
            margin-top: 20px;
        }
        
        .difference-item {
            display: flex;
            margin-bottom: 15px;
            align-items: center;
        }
        
        .difference-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            flex-shrink: 0;
        }
        
        .http-icon {
            background-color: var(--http-color);
            color: white;
        }
        
        .https-icon {
            background-color: var(--https-color);
            color: white;
        }
        
        .difference-content {
            flex: 1;
        }
        
        footer {
            text-align: center;
            margin-top: 40px;
            padding: 20px;
            color: #777;
            font-size: 0.9rem;
        }
        
        @media (max-width: 768px) {
            .container {
                flex-direction: column;
            }
            
            .process-steps {
                flex-wrap: wrap;
            }
            
            .step {
                width: 50%;
                margin-bottom: 20px;
            }
        }
    </style>
</head>
<body>
    <header>
        <h1>HTTP vs HTTPS 报文对比演示</h1>
        <p class="subtitle">直观展示明文传输与加密传输的区别</p>
    </header>
    
    <div class="container">
        <div class="input-section">
            <h2>🔧 测试配置</h2>
            <label for="url">访问的域名:</label>
            <input type="url" id="url" value="https://www.example.com/login" placeholder="输入URL">
            
            <label for="content">发送的数据:</label>
            <textarea id="content" rows="6" placeholder='{"username": "your_username", "password": "your_password"}'>{"用户名": "小明", "密码": "123456"}</textarea>
            
            <button id="send-btn">🚀 发送请求数据</button>
        </div>
        
        <div class="protocol-comparison">
            <div class="protocol http">
                <div class="protocol-header">
                    <h3 class="protocol-title">🔓 HTTP</h3>
                    <span class="status">未加密</span>
                </div>
                <div class="message-box" id="http-message">
HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Date: Sep, 1 Oct 2025 17:28:00 GMT
Server: Apache/2.4.1 (Unix)
Content-Length: 138

{"username": "testuser", "password": "supersecret123"}
                </div>
                <div class="encryption-process">
                    <h4>传输过程：明文传输</h4>
                    <div class="process-steps">
                        <div class="step">
                            <div class="step-icon">1</div>
                            <div class="step-text">客户端发送请求</div>
                        </div>
                        <div class="step">
                            <div class="step-icon">2</div>
                            <div class="step-text">通过中间路由器</div>
                        </div>
                        <div class="step">
                            <div class="step-icon">3</div>
                            <div class="step-text">可能被窃听或篡改</div>
                        </div>
                        <div class="step">
                            <div class="step-icon">4</div>
                            <div class="step-text">服务器接收</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="protocol https">
                <div class="protocol-header">
                    <h3 class="protocol-title">🔒 HTTPS</h3>
                    <span class="status">已加密</span>
                </div>
                <div class="message-box" id="https-message">
TLS Session Data:
17 03 03 00 45 2f a1 87 92 8a 1b 2c 9f 80 2d 45
e3 74 8f 21 7a fe 5c 7b 3a 29 de 91 43 2b 3c 4a
7b 2d 3f 5a 18 2c 33 9a 4e 82 1f 3b 8a 7d 2e 5c
a9 3d 4f 2b 8c 11 9a 2e 7b 3d 1a 8c 45 2f a1 87
...

* 加密内容无法直接阅读
                </div>
                <div class="encryption-process">
                    <h4>传输过程：TLS加密</h4>
                    <div class="process-steps">
                        <div class="step">
                            <div class="step-icon">🔑</div>
                            <div class="step-text">TLS握手</div>
                        </div>
                        <div class="step">
                            <div class="step-icon">🔄</div>
                            <div class="step-text">密钥交换</div>
                        </div>
                        <div class="step">
                            <div class="step-icon">⚡</div>
                            <div class="step-text">加密数据</div>
                        </div>
                        <div class="step">
                            <div class="step-icon">✓</div>
                            <div class="step-text">安全传输</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="visual-difference">
        <h2>📊 HTTP与HTTPS的关键区别</h2>
        
        <div class="difference-item">
            <div class="difference-icon http-icon">🔓</div>
            <div class="difference-content">
                <h4>HTTP - 明文传输</h4>
                <p>所有数据以明文形式传输，包括密码、信用卡信息等敏感数据。中间人（如ISP、公共WiFi提供商）可以轻松窃听或篡改通信内容。</p>
            </div>
        </div>
        
        <div class="difference-item">
            <div class="difference-icon https-icon">🔒</div>
            <div class="difference-content">
                <h4>HTTPS - 加密传输</h4>
                <p>使用TLS/SSL加密所有通信内容。即使数据被截获，攻击者也无法读取或修改其内容。提供身份验证、数据加密和完整性保护。</p>
            </div>
        </div>
        
        <div class="difference-item">
            <div class="difference-icon https-icon">⚡</div>
            <div class="difference-content">
                <h4>加密过程</h4>
                <p>HTTPS使用非对称加密交换密钥，然后使用对称加密加密实际数据传输。这种混合加密方式既安全又高效。</p>
            </div>
        </div>
    </div>
    
    <footer>
        <p>© 2023 HTTP vs HTTPS 演示 | 用于教育目的</p>
    </footer>

    <script>
        document.getElementById('send-btn').addEventListener('click', function() {
            const content = document.getElementById('content').value;
            const url = document.getElementById('url').value;
            
            // 更新HTTP报文
            document.getElementById('http-message').textContent = 
`POST ${url} HTTP/1.1
Host: www.example.com
Content-Type: application/json
Content-Length: ${content.length}

${content}`;

            // 生成模拟的HTTPS加密数据
            const httpsContent = generateHttpsMessage(content);
            document.getElementById('https-message').textContent = httpsContent;
        });
        
        function generateHttpsMessage(content) {
            // 这不是真正的加密，只是模拟效果
            const hexLength = Math.min(80, content.length * 3);
            let hexData = '';
            const hexChars = '0123456789abcdef';
            
            for (let i = 0; i < hexLength; i++) {
                if (i > 0 && i % 16 === 0) hexData += '\n';
                hexData += hexChars[Math.floor(Math.random() * 16)];
                hexData += hexChars[Math.floor(Math.random() * 16)];
                hexData += ' ';
            }
            
            return `TLS Session Data:
${hexData}...

* 加密内容无法直接阅读
* 原始数据: ${content.length} 字节
* 使用 AES-256-GCM 加密
* 使用 ECDHE_RSA 进行密钥交换`;
        }
    </script>
</body>
</html>